<template>
  <div class="activity-overview">
    <div
      class="page-header"
      :style="bannerImage ? { backgroundImage: `url(${bannerImage})` } : {}"
      :class="{ 'has-bg': !!bannerImage }"
    >
      <div class="container">
        <h1 class="page-title">{{ "其他活动" }}</h1>
        <p class="page-subtitle">{{ "展会期间精彩活动，促进交流合作" }}</p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('activity-calendar')"
            :class="['nav-item', { active: activeTab === 'activity-calendar' }]"
          >
            活动日历
          </a>
          <a
            @click="setActiveTab('industry-forum')"
            :class="['nav-item', { active: activeTab === 'industry-forum' }]"
          >
            行业论坛
          </a>
          <a
            @click="setActiveTab('tech-exchange')"
            :class="['nav-item', { active: activeTab === 'tech-exchange' }]"
          >
            技术交流会
          </a>
          <a
            @click="setActiveTab('business-matching')"
            :class="['nav-item', { active: activeTab === 'business-matching' }]"
          >
            商务对接
          </a>
          <a
            @click="setActiveTab('product-release')"
            :class="['nav-item', { active: activeTab === 'product-release' }]"
          >
            产品发布
          </a>
          <a
            @click="setActiveTab('activity-overview')"
            :class="['nav-item', { active: activeTab === 'activity-overview' }]"
          >
            其他活动
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <section class="overview-section">
        <!-- <h2 class="section-title">{{ pageData.title || "其他活动" }}</h2> -->
        <div class="overview-content">
          <div v-if="pageData.imageUrl" class="overview-image">
            <img :src="pageData.imageUrl" alt="其他活动" />
          </div>
          <div class="overview-text">
            <!-- <h3>{{ pageData.subtitle || "展会期间精彩活动" }}</h3> -->
            <el-timeline>
              <el-timeline-item
                v-for="overview in activityOverview"
                :key="overview.id"
                placement="top"
                :timestamp="overview.activeTime"
                color="var(--e-global-color-title)"
              >
                <el-card>
                  <h4 style="color: var(--e-global-color-title)">
                    {{ overview.title }}
                  </h4>
                  <div>
                    <p class="img-b">
                      <img
                        class="img"
                        :src="overview.image"
                        :alt="overview.title"
                      />
                    </p>
                    <el-button
                      type="primary"
                      style="color: #fff"
                      @click="goDetails(overview)"
                      >查看详情</el-button
                    >
                    <el-button
                      type="primary"
                      style="color: #fff"
                      @click="openDialog"
                      >报名参加</el-button
                    >
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            <!-- <p v-if="pageData.subtitle">{{ pageData.subtitle }}</p>
            <div
              v-if="pageData.content"
              class="overview-rich"
              v-html="pageData.content"
            ></div> -->
          </div>
          <!-- <div style="margin-top: 20px">
            <el-button type="primary" @click="openDialog">立即报名</el-button>
          </div> -->
        </div>
      </section>
    </div>
    <ActivityRegistrationDialog
      v-model="registrationDialogVisible"
      :activity-id="currentActivity?.id || null"
      :activity-title="currentActivity?.title || ''"
      activityPlatType="其他活动"
      @success="handleRegistrationSuccess"
    />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { subpageApi } from "@/api/user";
import ActivityRegistrationDialog from "@/components/ActivityRegistrationDialog.vue";

export default {
  name: "ActivityOverview",
  components: {
    ActivityRegistrationDialog,
  },
  setup() {
    const router = useRouter();
    const registrationDialogVisible = ref(false);
    const currentActivity = ref(null);
    const activeTab = ref("activity-overview");
    const pageData = ref({});
    const bannerImage = ref("");
    const activityOverview = ref([]);
    const loadPageData = async () => {
      try {
        const response = await subpageApi.getSubpageList(
          "activities",
          "activity-overview"
        );
        if (
          response &&
          (response.code === "200" || response.code === 200) &&
          Array.isArray(response.data) &&
          response.data.length > 0
        ) {
          // const first = response.data[0];
          // let parsed = {};
          // try {
          //   parsed =
          //     typeof first.content === "string"
          //       ? JSON.parse(first.content)
          //       : first.content || {};
          // } catch (_) {
          //   parsed = { content: first.content };
          // }
          // pageData.value = {
          //   ...parseContent(first?.content || ""),
          //   title: first.title || "其他活动",
          // };

          activityOverview.value = response.data.map((item, idx) => {
            let parsed = {};
            try {
              parsed =
                typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content || {};
            } catch (_) {
              parsed = { content: item.content };
            }
            return {
              id: item.id || idx + 1,
              title: item.title || "",
              description:
                item.description || parsed.description || parsed.subtitle || "",
              image: item.imageUrl || parsed.imageUrl || "",
              contentHtml: parsed.content || "",
              linkUrl: item.linkUrl || parsed.linkUrl || "",
              backgroundImage: parsed.backgroundImage || "",
              content: item.content || "",
              activeTime: item.activeTime || "",
            };
          });
        } else {
          pageData.value = {
            title: "其他活动",
            subtitle: "展会期间精彩活动，促进交流合作",
          };
        }
      } catch (error) {
        console.error("加载活动概览数据失败:", error);
        pageData.value = {
          title: "其他活动",
          subtitle: "展会期间精彩活动，促进交流合作",
        };
      }
    };

    const loadBanner = async () => {
      try {
        const res = await subpageApi.getContentByType("carousel_activities");
        if (
          res &&
          (res.code === "200" || res.code === 200) &&
          Array.isArray(res.data) &&
          res.data.length > 0
        ) {
          const firstActive =
            res.data.find((item) => item.status === "active") || res.data[0];
          bannerImage.value = firstActive.imageUrl || firstActive.image || "";
        }
      } catch (e) {
        bannerImage.value = "";
      }
    };

    const openDialog = () => {
      currentActivity.value = {
        title: pageData.value.title || "其他活动",
      };
      registrationDialogVisible.value = true;
      console.log(pageData.value);
    };

    const handleRegistrationSuccess = () => {
      console.log("报名成功:", currentActivity.value?.title);
      registrationDialogVisible.value = false;
    };

    onMounted(() => {
      loadPageData();
      loadBanner();
    });

    const setActiveTab = (tabKey) => {
      if (!tabKey) return;
      activeTab.value = tabKey;
      if (tabKey !== "activity-overview") {
        window.location.href = `/${tabKey}`;
      }
    };

    const goDetails = (info) => {
      const params = {
        pageTitle: "其他活动",
        pageSubTitle: "展会期间精彩活动，促进交流合作",
        title: info.title,
        content: info.content,
      };
      const val = JSON.stringify(params);
      sessionStorage.setItem("activityDetails", val);
      router.push({
        path: "/activity-details",
      });
    };

    // 解析富文本内容
    const parseContent = (content) => {
      if (!content)
        return {
          content: "",
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };

      try {
        if (typeof content === "string" && content.trim().startsWith("{")) {
          return JSON.parse(content);
        }
        return {
          content: content,
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };
      } catch (e) {
        return {
          content: content,
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };
      }
    };
    return {
      activeTab,
      bannerImage,
      pageData,
      setActiveTab,
      registrationDialogVisible,
      currentActivity,
      handleRegistrationSuccess,
      openDialog,
      activityOverview,
      goDetails,
    };
  },
};
</script>

<style scoped>
.activity-overview {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.overview-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.overview-content {
  /* max-width: 800px;
  margin: 0 auto; */
}

.overview-image {
  width: 100%;
  padding-bottom: 60%;
  position: relative;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.overview-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-item {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  border-radius: 15px;
  border: 1px solid #e0e7ff;
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--e-global-color-title);
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #666;
  font-size: 1.1rem;
  font-weight: 600;
}

.overview-text h3 {
  font-size: 1.8rem;
  color: var(--e-global-color-title);
  margin-bottom: 1rem;
  text-align: center;
}

.overview-text p {
  color: #666;
  line-height: 1.8;
  font-size: 1.1rem;
  text-align: center;
}

/* 富文本内图片限制 */
.overview-rich :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
  border-radius: 8px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 20px !important;
  margin-bottom: 20px;
}
.img-b {
  position: relative;
  width: 240px;
  height: 140px;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overview-content h4 {
  font-size: 1.3rem;
  color: #320063;
  margin-bottom: 1rem;
  font-weight: 600;
}

.overview-content p {
  color: #666;
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .overview-section {
    padding: 1rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .overview-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
</style>
